<template>
  <div class="app-container">
    <el-form :inline="true" label-width="100px">
      <el-form-item label="仓库编号">
        <el-input
          v-model.trim="queryParams.storeNum"
          placeholder="请输入仓库编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="仓库名称">
        <el-input
          v-model.trim="queryParams.storeName"
          placeholder="请输入仓库名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          v-hasPermi="['purchase:provider:query']"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['purchase:provider:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <!--仓库详情表-->
    <el-table
      v-loading="loading"
      :data="storeList"
    >
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="仓库编码" align="center" prop="storeNum" width="150px"/>
      <el-table-column label="仓库名称" align="center" prop="storeName"/>
      <el-table-column label="仓库地址" align="center" prop="storeAddress"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="操作人" align="center" prop="optByName" width="100"/>
      <el-table-column label="操作时间" align="center" prop="optDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.optDate,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['purchase:provider:update']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['purchase:provider:delete']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库编码" prop="storeNum">
              <el-input v-model.trim="form.storeNum" placeholder="请输入仓库编码" maxlength="200" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库名称" prop="storeName">
              <el-input v-model.trim="form.storeName" placeholder="请输入仓库名称" maxlength="200" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="仓库容量" prop="storePlot">
              <el-input v-model.trim="form.storePlot" placeholder="请输入仓库容量" maxlength="200" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="仓库地址" prop="storeAddress">
              <el-input v-model.trim="form.storeAddress" placeholder="请输入仓库地址" maxlength="100" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model.trim="form.remark" type="textarea" placeholder="请输入内容" maxlength="250" :rows="5"
                        clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
  import {getList, saveStore, deleteStore} from '@/api/product/store'

  export default {
    name: "store",
    data() {
      return {
        loading: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },


        storeList: [],


        open: false,
        title: "",
        form: {
          storeNum: undefined,
          storeName: undefined,
          storePlot: undefined,
          storeAddress: undefined,
          remark: undefined
        },

        rules: {
          storeName: [
            {required: true, message: '仓库名称不能为空', trigger: 'blur'}
          ],
          storePlot: [
            {required: true, message: '仓库容量不能为空', trigger: 'blur'}
          ],
          storeAddress: [
            {required: true, message: '仓库地址不能为空', trigger: 'blur'}
          ]
        }


      }
    },

    methods: {
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      getList() {
        getList(this.queryParams).then(res => {
          this.storeList = res.rows;
          this.total = res.total;
        }).catch(error => {
          console.log(error);
        })
      },

      /*新增*/
      handleAdd() {
        this.reset();
        this.title = "新增仓库";
        this.open = true;
      },

      handleUpdate(row) {
        this.reset();
        this.title = "修改仓库";
        this.open = true;
        this.form = row;
      },

      handleDelete(row) {
        let _this = this;
        this.$confirm('是否确认删除仓库？', '警告', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: "warning"
        }).then(function () {
          deleteStore(row.id).then(res => {
            _this.getList();
          }).catch(error => {
            console.log(error);
          })
        }).catch(e => e)
      },


      submitForm() {
        let _this = this;
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (_this.title === '新增仓库') {
              _this.$confirm('是否确认新增仓库', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'info'
              }).then(function () {
                saveStore(_this.form).then(res => {
                  _this.open = false;
                  _this.getList();
                  _this.$message.success("新增仓库成功");
                }).catch(error => {
                  _this.$message.success("新增仓库失败");
                })
              }).catch(e => e)
            } else {
              _this.$confirm('是否确认修改仓库', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'info'
              }).then(function () {
                saveStore(_this.form).then(res => {
                  _this.open = false;
                  _this.getList();
                  _this.$message.success("修改仓库成功");
                }).catch(error => {
                  console.log(error);
                  _this.$message.success("修改仓库失败");
                })
              }).catch(e => e)
            }
          }

        })
      },

      /*取消*/
      cancel() {
        this.open = false;
      },


      /*表单重置*/
      reset() {
        this.form = {
          storeNum: undefined,
          storeName: undefined,
          storePlot: undefined,
          storeAddress: undefined,
          remark: undefined
        };
        this.resetForm('form');
      }

    },

    created() {
      this.getList();
    }
  }
</script>

<style scoped>

</style>
